const path = require('path')

const htmlWebpackPlugin = require('html-webpack-plugin')

const VueLoaderPlugin = require('vue-loader/lib/plugin')

// 这个配置文件，起始就是一个 JS 文件，通过 Node 中的模块操作，向外暴露了一个 配置对象
module.exports = {
  mode:'development',
  // 大家已经学会了举一反4， 大家觉得，在配置文件中，需要手动指定 入口 和 出口
  entry: path.join(__dirname, './src/index.js'),// 入口，表示，要使用 webpack 打包哪个文件
  output: { // 输出文件相关的配置
    path: path.join(__dirname, './dist'), // 指定 打包好的文件，输出到哪个目录中去
    filename: 'main.js' // 这是指定 输出的文件的名称
  },
  plugins:[
    new htmlWebpackPlugin({
        template: path.join(__dirname, './index.html'), // 指定 模板页面，将来会根据指定的页面路径，去生成内存中的 页面
        filename: 'index.html' // 指定生成的页面的名称
    }),
    new VueLoaderPlugin()
  ],
  module:{
    rules:[
      { test:/\.css$/,use:[ "style-loader","css-loader" ] },
      { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
      { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
      { test: /\.html$/, use: "html-loader" },
      { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=60,451&name=[hash:8]-[name].[ext]' }, // 处理 图片路径的 loader
      { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' },
      { test: /\.js$/, use:"babel-loader", exclude: /node_modules/ },
      { test: /\.vue$/, use:"vue-loader" }
    ]
  }
}

